<!DOCTYPE html>
<html>
<head>
	<title>onyx popup sample</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script src="../../../../enyo/enyo.js" type="text/javascript"></script>
	<script src="../../../onyx/package.js" type="text/javascript"></script>
	<script src="../../../layout/package.js" type="text/javascript"></script>
	<script src="../../../onyx/source/wip-package.js" type="text/javascript"></script>
</head>
<style>
	.popup {
		font-size: 30px;
		text-align: center;
	}

	.light {
		background: #eee;
		color: black;
	}
</style>
<body>
	<script>
		new (enyo.kind({
			name: "App",
			kind: "Control",
			fit: true,
			classes: "onyx",
			components: [
				{classes: "onyx-toolbar-inline", components: [
					{kind: "onyx.Button", content: "Popup...", ontap: "showPopup", popup: "popup"},
					{name: "popup", classes: "popup", kind: "onyx.Popup", centered: true, floating: true, onHide: "popupHidden", components: [
						{kind: "onyx.Spinner"},
						{content: "Popup"}
					]},
					{kind: "onyx.Button", content: "Light Popup...", ontap: "showPopup", popup: "lightPopup"},
					{name: "lightPopup", classes: "popup light", kind: "onyx.Popup", centered: true, floating: true, onHide: "popupHidden", components: [
						{kind: "onyx.Spinner", classes: "onyx-light"},
						{content: "Popup"}
					]},
					{kind: "onyx.Button", content: "Modal Popup...", ontap: "showPopup", popup: "modalPopup"},
					{name: "modalPopup", classes: "popup", kind: "onyx.Popup", centered: true, modal: true, floating: true, onShow: "popupShown", onHide: "popupHidden", components: [
						{kind: "onyx.InputDecorator", components: [
							{kind: "onyx.Input"}
						]},
						{tag: "br"},
						{kind: "onyx.Button", content: "Close", ontap: "closeModalPopup"}
					]}
				]}
			],
			showPopup: function(inSender) {
				var p = this.$[inSender.popup];
				if (p) {
					onyx.scrim.show();
					//onyx.scrimTransparent.show();
					p.show();
					//this.$.input.focus();
				}
			},
			popupHidden: function() {
				onyx.scrim.hide();
				// FIXME: needed to hide ios keyboard
				document.activeElement.blur();
				
			},
			popupShown: function() {
				// FIXME: does not focus input on android.
				this.$.input.focus();
				enyo.job("focus", enyo.bind(this.$.input, "focus"), 500);
			},
			closeModalPopup: function() {
				this.$.modalPopup.hide();
			}
		}))().write();
	</script>
</body>
</html>
